‹

Exemplos de alinhamento do CSS Grid

Alinhamento horizontal (prop: justify-content)

start

Alinha o conteúdo do grid no início do container horizontalmente (à esquerda). Esta é a posição padrão quando não há espaço extra disponível.

CSS

.start {
  display: grid;
  grid-template-columns: 20% 20% 20%;
  justify-content: start;
}
1
2
3
4
5
6
7
8
9

end

Alinha o conteúdo do grid no final do container horizontalmente (à direita). Útil quando você quer que o grid apareça na extremidade direita do container.

CSS

.end {
  display: grid;
  grid-template-columns: 20% 20% 20%;
  justify-content: end;
}
1
2
3
4
5
6
7
8
9

stretch (default)

Estica o conteúdo para ocupar todo o espaço disponível no container. É o valor padrão. As colunas se ajustam para preencher toda a largura do container.

CSS

.center {
  display: grid;
  grid-template-columns: auto 20% 20%;
  justify-content: stretch;
}
1
2
3
4
5
6
7 (grid-column: span 2;)
8
9

space-evenly

Distribui o espaço disponível igualmente entre as colunas e também nas extremidades. Todos os espaços (entre colunas e nas bordas) têm o mesmo tamanho.

CSS

.space-evenly {
  display: grid;
  grid-template-columns: 20% 20% 20%;
  justify-content: space-evenly;
}
1
2
3
4
5
6
7
8
9

space-around

Distribui o espaço disponível ao redor das colunas. O espaço nas extremidades é metade do espaço entre as colunas, criando uma distribuição equilibrada.

CSS

.space-around {
  display: grid;
  grid-template-columns: 20% 20% 20%;
  justify-content: space-around;
}
1
2
3
4
5
6
7
8
9

space-between

Distribui o espaço disponível entre as colunas, sem espaço nas extremidades. A primeira e última coluna ficam grudadas nas bordas do container.

CSS

.space-between {
  display: grid;
  grid-template-columns: 20% 20% 20%;
  justify-content: space-between;
}
1
2
3
4
5
6
7
8
9

center

Centraliza o conteúdo do grid horizontalmente no container. As colunas ficam agrupadas no centro, com espaço igual nas laterais.

CSS

.center {
  display: grid;
  grid-template-columns: 20% 20% 20%;
  justify-content: center;
}
1
2
3
4
5
6
7
8
9

Alinhamento vertical (prop: align-content)

start

Alinha o conteúdo do grid no início do container verticalmente (no topo). As linhas do grid ficam agrupadas na parte superior do container.

CSS

.start {
  display: grid;
  align-content: start;
}
1
2
3
4
5
6
7
8
9

end

Alinha o conteúdo do grid no final do container verticalmente (na parte inferior). As linhas do grid ficam agrupadas na parte de baixo do container.

CSS

.end {
  display: grid;
  align-content: end;
}
1
2
3
4
5
6
7
8
9

center

Centraliza o conteúdo do grid verticalmente no container. As linhas do grid ficam agrupadas no centro vertical, com espaço igual acima e abaixo.

CSS

.end {
  display: grid;
  align-content: center;
}
1
2
3
4
5
6
7
8
9

space-evenly

Distribui o espaço vertical disponível igualmente entre as linhas e também nas extremidades. Todos os espaços verticais (entre linhas e nas bordas) têm o mesmo tamanho.

CSS

.space-evenly {
  display: grid;
  align-content: space-evenly;
}
1
2
3
4
5
6
7
8
9

space-around

Distribui o espaço vertical disponível ao redor das linhas. O espaço nas extremidades (topo e base) é metade do espaço entre as linhas.

CSS

.space-around {
  display: grid;
  align-content: space-around;
}
1
2
3
4
5
6
7
8
9

space-between

Distribui o espaço vertical disponível entre as linhas, sem espaço nas extremidades. A primeira linha fica no topo e a última na base do container.

CSS

.space-between {
  display: grid;
  align-content: space-between;
}
1
2
3
4
5
6
7
8
9

Alinhamento horizontal e vertical (prop: place-content)

place-content: start

Alinha todo o conteúdo do grid no início tanto vertical quanto horizontalmente. É equivalente a usar align-content: start e justify-content: start.

CSS

.place-start {
  display: grid;
  grid-template-columns: 20% 20% 20%;
  place-content: start;
}
1
2
3
4
5
6
7
8
9

place-content: center

Centraliza todo o conteúdo do grid tanto vertical quanto horizontalmente. É equivalente a usar align-content: center e justify-content: center.

CSS

.place-center {
  display: grid;
  grid-template-columns: 20% 20% 20%;
  place-content: center;
}
1
2
3
4
5
6
7
8
9

place-content: end

Alinha todo o conteúdo do grid no final tanto vertical quanto horizontalmente. É equivalente a usar align-content: end e justify-content: end.

CSS

.place-end {
  display: grid;
  grid-template-columns: 20% 20% 20%;
  place-content: end;
}
1
2
3
4
5
6
7
8
9

place-content: space-between

Distribui o espaço igualmente entre o conteúdo, sem espaço nas extremidades, tanto vertical quanto horizontalmente.

CSS

.place-space-between {
  display: grid;
  grid-template-columns: 20% 20% 20%;
  place-content: space-between;
}
1
2
3
4
5
6
7
8
9

place-content: space-around

Distribui o espaço igualmente ao redor do conteúdo, com metade do espaço nas extremidades, tanto vertical quanto horizontalmente.

CSS

.place-space-around {
  display: grid;
  grid-template-columns: 20% 20% 20%;
  place-content: space-around;
}
1
2
3
4
5
6
7
8
9

place-content: space-evenly

Distribui o espaço igualmente, incluindo nas extremidades, tanto vertical quanto horizontalmente. Todos os espaços são iguais.

CSS

.place-space-evenly {
  display: grid;
  grid-template-columns: 20% 20% 20%;
  place-content: space-evenly;
}
1
2
3
4
5
6
7
8
9

place-content: start center

Permite definir valores diferentes para align-content (primeiro valor) e justify-content (segundo valor). Aqui: alinhamento vertical no início e horizontal no centro.

CSS

.place-start-center {
  display: grid;
  grid-template-columns: 20% 20% 20%;
  place-content: start center;
}
1
2
3
4
5
6
7
8
9